<template>
	<u-popup :closeOnClickOverlay="false" :show="show" mode="center" :round="20" @close="close">
		<view class="popup">
			<view class="popup-hd">选择设备</view>
			<view class="popup-bd">
				<view class="device" @tap="connectToDevice(index)" v-for="(item, index) in devicesList" :key="index">
					<view>
						<view class="name">{{ item.name }}</view>
						<view>{{ item.deviceId }}</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			devicesList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				show: false
			};
		},
		methods: {
			connectToDevice(index) {
				this.show = false;
				this.$emit('connectToDevice', index);
			},
			close() {
				this.show = false;
			}
		}
	};
</script>

<style scoped lang="scss">
	.popup {
		padding: 30rpx;
		background: #f2f2f2;
		width: 80vw;
		border-radius: 10px;

		.popup-hd {
			font-size: 30rpx;
			margin-bottom: 30rpx;
		}

		.popup-bd {
			max-height: 60vh;
			overflow: auto;
		}

		.device {
			background: #fff;
			padding: 20upx 30upx;
			border-radius: 12rpx;
			color: #666;

			&+.device {
				margin-top: 20rpx;
			}

			.name {
				color: #333;
				font-size: 30upx;
				margin-bottom: 10upx;
			}
		}
	}
</style>